<div nz-row class="main-row">
  <div
    class="col"
    nz-col
    nz-resizable
    (nzResize)="onResize($event)"
    [nzMinColumn]="3"
    [nzMaxColumn]="20"
    [nzGridColumnCount]="24"
    [nzSpan]="col"
  >
    <div class="col-inner col-inner-left">
      <div>
        <a
          class="header-button"
          [routerLink]="['/home']"
          routerLinkActive="active"
          >返回首页</a
        >
        <a class="header-button" *ngIf="pageIndex !== 0" (click)="lastPage()"
          >上一页</a
        >
        <span>{{ pageIndex + 1 }}/{{ course.page.length }}页</span>
        <a class="header-button" (click)="nextPage()">下一页</a>
        <a class="header-button" (click)="deletePage()">删除本页</a>
      </div>
      <div class="markdown-monaco-wrapper">
        <nz-code-editor
          class="editor"
          [(ngModel)]="page.markdown"
          [nzEditorOption]="{ language: 'markdown', fontSize: 20, wordWrap: 'on' }"
          (nzEditorInitialized)="onEditorInit('markdown', $event)"
          [nzLoading]="!editorLoaded['markdown']"
        ></nz-code-editor>
      </div>
      <div class="task-wrapper">
        <div class="task">
          <nz-tabset
            [(nzSelectedIndex)]="selectedTaskIndex"
            (nzSelectedIndexChange)="onTaskSelectedIndexChange($event)"
            nzType="editable-card"
            (nzAdd)="newTaskTab()"
            (nzClose)="closeTaskTab($event)"
          >
            <nz-tab
              *ngFor="let task of page.task; let index"
              nzClosable
              [nzTitle]="task.title"
            >
              <textarea
                class="task-textarea"
                placeholder="任务说明，第一行是标题，第二行用于提示"
                rows="2"
                nz-input
                [(ngModel)]="currentTaskTextArea"
                (keyup)="taskTextChange()"
              ></textarea>
            </nz-tab>
          </nz-tabset>
        </div>
      </div>
    </div>
    <nz-resize-handles [nzDirections]="['right']"></nz-resize-handles>
  </div>
  <div class="col" nz-col [nzSpan]="24 - col">
    <div class="col-inner">
      <nz-tabset
        [(nzSelectedIndex)]="tabSelectedIndex"
        (nzSelectedIndexChange)="onTabSelectedIndexChange($event)"
        [nzAnimated]="false"
      >
        <nz-tab nzTitle="🧪test代码">
          <ng-template nz-tab>
            <nz-input-group class="run-time" nzAddOnBefore="test运行次数">
              <nz-input-number [(ngModel)]="task.check.time" (ngModelChange)="onRunTimeChange('test', $event)"></nz-input-number>
            </nz-input-group>
            <button
              nz-button
              nz-popover
              nzType="default"
              nzPopoverTitle="test代码"
              [nzPopoverContent]="testHelpPopover"
            >
              ?
            </button>
            <ng-template #testHelpPopover>
              <div>
                <p>test代码为用户提供提示</p>
                <p>把想要告诉用户的输出就可以啦</p>
                <p>
                  下面的三个代码块分别是测试前代码、用户输入代码、测试代码，最下面的文本框是用户默认预输入
                </p>
                <p>
                  注意！用户输入代码和用户默认与输入在检查和测试页面是相同的
                </p>
              </div>
            </ng-template>
            <div class="code-wrapper">
              <div class="monaco-wrapper">
                <nz-code-editor
                  class="editor"
                  [(ngModel)]="task.test.before"
                  [nzEditorOption]="{ language: 'python', fontSize: 20 }"
                  (nzEditorInitialized)="onEditorInit('test_before', $event)"
                  [nzLoading]="!editorLoaded['test_before']"
                ></nz-code-editor>
              </div>
              <div class="monaco-wrapper">
                <nz-code-editor
                  class="editor"
                  [(ngModel)]="page.code"
                  [nzEditorOption]="{ language: 'python', fontSize: 20 }"
                  (nzEditorInitialized)="onEditorInit('test_main', $event)"
                  [nzLoading]="!editorLoaded['test_main']"
                ></nz-code-editor>
              </div>
              <div class="monaco-wrapper">
                <nz-code-editor
                  class="editor"
                  [(ngModel)]="task.test.after"
                  [nzEditorOption]="{ language: 'python', fontSize: 20 }"
                  (nzEditorInitialized)="onEditorInit('test_after', $event)"
                  [nzLoading]="!editorLoaded['test_after']"
                ></nz-code-editor>
              </div>
              <div class="input-div">
                <textarea
                  class="input-textarea"
                  placeholder="请在这里留下想要输入的内容"
                  rows="4"
                  nz-input
                  [(ngModel)]="page.preinput"
                ></textarea>
              </div>
            </div>
          </ng-template>
        </nz-tab>
        <nz-tab nzTitle="💯check代码">
          <ng-template nz-tab>
            <nz-input-group class="run-time" nzAddOnBefore="check运行次数">
              <nz-input-number [(ngModel)]="task.check.time" (ngModelChange)="onRunTimeChange('check', $event)"></nz-input-number>
            </nz-input-group>
            <button
              nz-button
              nz-popover
              nzType="default"
              nzPopoverTitle="check代码"
              [nzPopoverContent]="checkHelpPopover"
            >
              ?
            </button>
            <ng-template #checkHelpPopover>
              <div>
                <p>check代码是用于对代码进行最终测试</p>
                <p>它要求最后一行代码为表达式，返回bool值</p>
                <p>
                  下面的三个代码块分别是测试前代码、用户输入代码、测试代码，最下面的文本框是用户默认预输入
                </p>
                <p>
                  注意！用户输入代码和用户默认与输入在检查和测试页面是相同的
                </p>
                
              </div>
            </ng-template>
            <div class="code-wrapper">
              <div class="monaco-wrapper">
                <nz-code-editor
                  class="editor"
                  [(ngModel)]="task.check.before"
                  [nzEditorOption]="{ language: 'python', fontSize: 20, wordWrap: 'on' }"
                  (nzEditorInitialized)="onEditorInit('check_before', $event)"
                  [nzLoading]="!editorLoaded['check_before']"
                ></nz-code-editor>
              </div>
              <div class="monaco-wrapper">
                <nz-code-editor
                  class="editor"
                  [(ngModel)]="page.code"
                  [nzEditorOption]="{ language: 'python', fontSize: 20, wordWrap: 'on' }"
                  (nzEditorInitialized)="onEditorInit('check_main', $event)"
                  [nzLoading]="!editorLoaded['check_main']"
                ></nz-code-editor>
              </div>
              <div class="monaco-wrapper">
                <nz-code-editor
                  class="editor"
                  [(ngModel)]="task.check.after"
                  [nzEditorOption]="{ language: 'python', fontSize: 20, wordWrap: 'on' }"
                  (nzEditorInitialized)="onEditorInit('check_after', $event)"
                  [nzLoading]="!editorLoaded['check_after']"
                ></nz-code-editor>
              </div>
              <div class="input-div">
                <textarea
                  class="input-textarea"
                  placeholder="请在这里留下想要输入的内容"
                  rows="4"
                  nz-input
                  [(ngModel)]="page.preinput"
                ></textarea>
              </div>
            </div>
          </ng-template>
        </nz-tab>
        
        <nz-tab nzTitle="💻markdown预览">
          <ng-template nz-tab>
            <ng-scrollbar class="markdown-wrapper">
              <div
                markdown
                lineNumbers
                class="markdown"
                [data]="page.markdown"
              ></div>
            </ng-scrollbar>
          </ng-template>
        </nz-tab>
      </nz-tabset>
    </div>
  </div>
</div>
